import React from 'react';

interface PrintElemProps {
  dataList: any;
}

// eslint-disable-next-line react/prefer-stateless-function
class PrintElemInfo extends React.Component<PrintElemProps> {
  render() {
    const { dataList = [] } = this.props;

    return (
      <div style={{ display: 'none' }}>
        <div className="printView" id="billDetails">
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
            }}
          >
            <thead>
              <tr>
                <td
                  colSpan={13}
                  style={{
                    textAlign: 'center',
                    fontSize: '20px',
                    fontWeight: 'bold',
                    border: '1px solid #ADADAD',
                    borderCollapse: 'collapse',
                    lineHeight: '200%',
                  }}
                >
                  盘点管理
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                textAlign: 'center',
              }}
              >
                <td style={{ border: '1px solid #ADADAD' }}>序号</td>
                <td style={{ border: '1px solid #ADADAD' }}>运单号</td>
                <td style={{ border: '1px solid #ADADAD' }}>收件人手机</td>
                <td style={{ border: '1px solid #ADADAD' }}>投递人手机</td>
                <td style={{ border: '1px solid #ADADAD' }}>入库时间</td>
                <td style={{ border: '1px solid #ADADAD' }}>盘点次数</td>
                <td style={{ border: '1px solid #ADADAD' }}>存放位置</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递公司</td>
                <td style={{ border: '1px solid #ADADAD' }}>批次号</td>
                <td style={{ border: '1px solid #ADADAD' }}>问题件</td>
                <td style={{ border: '1px solid #ADADAD' }}>是否到付</td>
                <td style={{ border: '1px solid #ADADAD' }}>盘点员</td>
                <td style={{ border: '1px solid #ADADAD' }}>盘点状态</td>
              </tr>
              {
                dataList.map((item: any, index: number) => (
                  <tr
                    key={item.id}
                    style={{
                      lineHeight: '32px',
                      height: '32px',
                      fontSize: 12,
                      textAlign: 'center',
                    }}
                  >
                    <td style={{ border: '1px solid #ADADAD' }}>{index + 1}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.expCode}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.consigneePhone}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.courierPhone}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.inTime}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.takingCount}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.address}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.expressName}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.batchName}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.problemId ? '是' : '否'}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.payment ? '是' : '否'}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.takingUser}</td>
                    <td style={{ border: '1px solid #ADADAD' }}>{item.takingStatusName}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default PrintElemInfo;
